<template>
<div class="wrapper">
  <head :title="title"></head>
  <list class="scroller">
    <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
      <loading-indicator class="indicator"></loading-indicator>
    </refresh>

    <div class="list-top-border" v-if="msgData.length > 0"></div>
    <cell v-for="(msg,index) in msgData" :key="index" ref="mainList">
      <!-- <swipecell @cellclick="clickmenu(msg)" @actionClick="actionClick(msg)"> -->
      <div slot="content" class="panel" @click="clickmenu(msg)">
        <image class="content-img" src="root:img/user.jpg" />
        <div class="panel-content">
          <div class="content-div">
            <text :class="['content-title',isIos()?'':'ios-icon-top3']">{{msg.sessionId}}</text>
            <text :class="['content-text',isIos()?'':'ios-icon-top2']">{{msg.lastMessage}}</text>
            <text class="timeAgo">{{new Date(msg.time)}}</text>
          </div>
          <!-- <image class="goodsImg" src="root:img/goods.png" /> -->
        </div>
      </div>
      <!-- </swipecell> -->
    </cell>
  </list>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
const modal = weex.requireModule("modal");
const storage = weex.requireModule("storage");
export default {
  components: {
    // swipecell: require("root:component/swipecell.vue")
  },
  created() {
    let that = this;
    let nim = weex.requireModule("nim");
    nim.regist({ appKey: "d9d5ad49095ce9835e381c9eeab988e2" });
    nim.login(
      { account: "admin", token: "f4ab3d1e4be37bd295a953724c69f0b3" },
      res => {
        if (res.err == 0) {
          nim.recent(items => { 
            that.msgData = items;
          });
        } else {
          that.toast("云信登录失败！" + res.err);
        }
      }
    );
  },
  data() {
    return {
      title: "message",
      refreshing: false,
      qrColor: "#1B82D2",
      bartheme: "",
      msgData: [],
      topMShow: false,
      theme: "topM_theme1"
    };
  },
  methods: {
    clickmenu(data) {
      let nim = weex.requireModule("nim");
      nim.openP2P({
        account: data.sessionId,
        navBarBgColor: "#000000",
        theme: "white"
      });
    },
    actionClick() {},
    leftButtonClick() {
      // this.push(asCore.localpath + "saui/list.js");
    },
    openMessage(data) {},
    onrefresh(event) {
      this.refreshing = true;
      this.topMShow = false;
      let that = this;
    },
    opentopM() {
      this.topMShow = true;
    },
    closetopM: function(e) {
      this.topMShow = false;
      e.stopPropagation();
    },
    openQr: function(e) {
      var qr = weex.requireModule("qr");
      var p = {};
      p.color = "#ffffff";
      p.bgcolor = this.qrColor;
      this.topMShow = false;
      qr.open(p, res => {
        var url = res.url;
      });
    },
    openSearch() {
      // this.push(asCore.localpath + "yunagileoa/index/searchP.js");
    },
    setColor(color) {
      this.qrColor = color;
    },
    setTheme(tname) {
      this.bartheme = tname;
      storage.getItem("theme", event => {
        if (event.data) {
          if (event.data == "theme1") {
            this.theme = "topM_" + event.data;
          } else {
            this.theme = "topM_theme2";
          }
        }
      });
    },
    isIos() {
      const { platform } = weex.config.env;
      return platform.toLowerCase() === "ios";
    }
  }
};
</script>
<style scoped>
.wrapper {
  flex: 1;
}

.iconfont {
  font-family: iconfont;
}

.scroller {
  flex: 1;
}

.refresh {
  width: 750;

  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.indicator {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 70px;
  width: 70px;
  color: #ce2020;
}

.panel {
  width: 750px;
  background-color: #ffffff;
  flex-direction: row;
}

.content-img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
}

.panel-content {
  flex: 1;
  flex-direction: row;
  /* padding-left: 25px; */
  padding-top: 18px;
  padding-right: 30px;
  padding-bottom: 10px;
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.panel-pos {
  position: relative;
}

.content-icon {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}

.ios-icon-top {
  padding-top: 10px;
}

.ios-icon-top2 {
  padding-top: 15px;
}

.ios-icon-top3 {
  padding-top: 5px;
}

.content-font {
  color: #ffffff;
}

.content-div {
  flex: 1;
}

.goodsImg {
  width: 100px;
  height: 100px;
  margin: 20px 0;
}

.content-title {
  margin-top: 3px;
  color: #333;
  text-overflow: ellipsis;
  lines: 1;
  font-size: 32px;
}

.content-text {
  color: #888;
  text-overflow: ellipsis;
  lines: 1;
  padding-top: 10px;
  font-size: 28px;
}

.timeAgo {
  color: #999999;
  font-size: 24px;
  margin-top: 20px;
}

.msg-tag {
  position: absolute;
  top: 10px;
  left: 90px;
  border-radius: 40px;
  background-color: #ff3e3e;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
}

.count-text {
  font-size: 24px;
  color: #ffffff;
}

.list-top-border {
  border-bottom-width: 1px;
  border-bottom-color: #d9d9d9;
}

.topMenu {
  width: 750px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0px;
}

.content {
  margin-top: 130px;
  margin-left: 425px;
  width: 320px;
  /* height: 160px; */
}

.topBtn {
  width: 320px;
  height: 79px;
  border-top-color: #24272c;
  border-top-width: 1px;
  padding-left: 30px;
  flex-direction: row;
}

.topBtn：active {
  background-color: #2e3238;
}

.topBtn_icon {
  font-size: 34px;
  line-height: 80px;
  margin-right: 20px;
  color: #fff;
}

.topBtn_text {
  font-size: 34px;
  line-height: 80px;
  color: #fff;
}

.topM_theme1 {
  background-color: #3a3f45;
  border-top-color: #24272c;
  border-top-width: 1px;
}

.topM_theme2 {
  background-color: #fff;
  border-top-color: #e2e2e2;
  border-top-width: 2px;
  border-bottom-color: #e2e2e2;
  border-bottom-width: 2px;
  border-left-color: #e2e2e2;
  border-left-width: 2px;
  border-right-color: #e2e2e2;
  border-right-width: 2px;
}

.topM_theme2_font {
  color: #888;
}

.topM_theme2_border {
  border-top-color: #fff;
}
</style>
